import React, {Component} from 'react';
import $http from '../../../untils/request'
import {Form, Input, Button, Select, Tabs, Modal, Switch, Table, Row, Col, Popconfirm, message} from 'antd';
import '../../../components/style/index.less'

class Home extends React.Component {
    constructor(prors) {
        super(prors);
        this.state = {
            name: '',
            value: '',
            pName: '',
            listUrl: '',
            visible: false,
            loading: true,
            check: false,
            menuList: [],
            tabsKey: '1',
            dialogTitle: '',
            listId: ''
        }
    }

    componentDidMount() {
        this.getNavList()
    }

    render() {
        const columns = [
            {
                title: '菜单名',
                dataIndex: 'menuName',
                key: '1',
            },
            {
                title: '层级',
                dataIndex: 'level',
                key: '2',
            },
            {
                title: '路径',
                dataIndex: 'listUrl',
                key: '3',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: '4',
                render: (key) => {
                    return key === 1 ? "启用" : '禁用'
                }
            },
            {
                title: '操作',
                dataIndex: '',
                key: '5',
                render: (text, record, index) => (
                    <div>
                        <Button style={{marginRight: '10px'}} size='small' type='primary'
                                onClick={e => this.editList(record)}>编辑</Button>
                        <Popconfirm title="确定删除？" okText="确认" cancelText="取消"
                                    onConfirm={e => this.delTableList(record)}>
                            <Button size='small' type='danger'>删除</Button>
                        </Popconfirm>
                    </div>
                )

            },
        ]
        const data = (data) => {
            const _list = (data) => {
                data.map(item => {
                    item.key = item.id
                    if (item.children) {
                        _list(item.children)
                    }
                })
            }
            _list(data)
            return data
        }

        return (
            <div className='home'>
                <Row>
                    <Col span={24}>
                        <Button onClick={() => {
                            this.setState({
                                visible: true,
                                dialogTitle: '新增',
                                tabsKey: '1'
                            })
                        }}>新增</Button>
                    </Col>
                </Row>
                <Row style={{marginTop: '10px'}}>
                    <Col span={24}>
                        <Table loading={this.state.loading} columns={columns} dataSource={data(this.state.menuList)}>
                        </Table>
                    </Col>
                </Row>
                <Modal title={this.state.dialogTitle}
                       visible={this.state.visible}
                       maskClosable={false}
                       onCancel={() => this.clearForm()}
                       onOk={() => this.onSubmitForm()}
                >
                    <Tabs activeKey={this.state.tabsKey} onTabClick={(key) => {
                        this.setState({
                            tabsKey: key
                        })
                    }}>
                        <Tabs.TabPane tab='一级菜单' key='1'>
                            <Form labelCol={{xs: {span: 24,}, sm: {span: 5,},}} ref='form1'
                                  initialValues={{...this.state}}>
                                <Form.Item label='菜单名' name='name'>
                                    <Input
                                        onChange={event => this.onChange(event, 'name')}
                                    ></Input>
                                </Form.Item>
                                <Form.Item label='菜单路径' name='listUrl'>
                                    <Input
                                        onChange={event => this.onChange(event, 'listUrl')}></Input>
                                </Form.Item>
                                <Form.Item label='状态'>
                                    <Switch
                                        checked={this.state.check}
                                        onChange={() => this.setCheck()}></Switch>
                                </Form.Item>
                            </Form>
                        </Tabs.TabPane>
                        <Tabs.TabPane tab='二级菜单' key='2'>
                            <Form labelCol={{xs: {span: 24,}, sm: {span: 5,},}} ref='form2'
                                  initialValues={{...this.state}}>
                                <Form.Item label='父级菜单' name='pid'>
                                    <Select onSelect={(value) => {
                                        this.onSelectChange(value, 'pid')
                                    }}
                                    >
                                        {
                                            this.state.menuList.map(item => (
                                                <Select.Option key={item.id}>{item.menuName}</Select.Option>
                                            ))
                                        }
                                    </Select>
                                </Form.Item>
                                <Form.Item label='子级菜单' name='name'>
                                    <Input
                                        onChange={event => this.onChange(event, 'name')}></Input>
                                </Form.Item>
                                <Form.Item label='子级路径' name='listUrl'>
                                    <Input value={this.state.listUrl}
                                           onChange={event => this.onChange(event, 'listUrl')}></Input>
                                </Form.Item>
                                <Form.Item label='状态' name='check'>
                                    <Switch
                                        checked={this.state.check}
                                        onChange={() => this.setCheck()}></Switch>
                                </Form.Item>
                            </Form>
                        </Tabs.TabPane>
                    </Tabs>
                </Modal>
            </div>
        );
    }

    onChange(event, name) {
        const value = event.target.value
        if (value) {
            this.setState((state, props) => {
                state[name] = value
            })
        }
    }

    async delTableList(e) {
        const data = {
            id: e.id
        }
        const res = await $http.post('/deleteMenu', data)
        if (res.status === 200) {
            message.success(res.msg)
            this.getNavList()
        }
    }

    setCheck() {
        this.setState({
            check: this.state.check ? false : true
        })
    }

    clearForm() {
        this.refs[`form${this.state.tabsKey}`].setFieldsValue({
            name: '',
            value: '',
            pid: '',
            listUrl: '',
            tabskey: '1',
        })
        this.setState({
            visible: false,
            check: false,
        })
    }

    async editList(e) {
        const data = {
            id: e.id
        }
        const res = await $http.post('/editMenuList', data)
        if (res.status === 200) {
            this.setState({
                visible: true,
                tabsKey: res.data.level.toString(),
                dialogTitle: '编辑',
                check: res.data.status === 1 ? true : false,
                listId: e.id,
            })
            this.refs[`form${this.state.tabsKey}`].setFieldsValue({
                name: res.data.menuName,
                value: res.data.level,
                pid: res.data.pid,
                listUrl: res.data.listUrl,
            })
        }
    }

    async onSubmitForm() {
        const form = this.refs[`form${this.state.tabsKey}`].getFieldsValue()
        const data = {
            name: form.name,
            level: form.value,
            listUrl: form.listUrl,
            tabsKey: this.state.tabsKey,
            pid: form.pid,
            listId: this.state.listId,
            status: this.state.check ? '1' : '0'
        }
        let url = this.state.dialogTitle === '新增' ? '/addMenuList' : '/editMenuSubmit'
        const res = await $http.post(url, data)
        if (res.status === 200) {
            message.success(res.msg)
            this.clearForm()
            this.setState({
                visible: false
            })
            this.getNavList()
        }
    }

    onSelectChange(value, type) {
        if (type === "pid") {
            this.state.menuList.forEach(item => {
                if (item.id === parseInt(value)) {
                    this.setState({
                        pid: value
                    })
                }
            })
        } else {
            const data = Object.assign({}, this.state.children, {id: value})
            console.log(data)
            this.setState({
                children: data
            })
        }

    }

    async getNavList() {
        const res = await $http.get('/getNavList')
        if (res.status === 200) {
            this.setState({
                menuList: res.data,
                loading: false,
            })
        }
    }

    async onSubmit() {
        const data = {
            name: this.state.name,
            level: this.state.value,
            pName: this.state.pName,
            listUrl: this.state.listUrl
        }
        const res = await $http.post('/addMenuList', data)
        console.log(res)
    }

}

export default Home;
